<template>

    <div class="order-details_box">
        <div class="borderbottom">
            <h3 class="order-details_h3">基础信息</h3>
            <el-row class="order-details_content">
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="8"><span>叮咚码：{{orderDetailData.full_dingdong}}</span></el-col>
                    <el-col :span="8"><span>订单编号：{{orderDetailData.express_number}}</span></el-col>
                    <el-col :span="8" style="text-align: right"><span>服务类型：{{orderDetailData.product?orderDetailData.product.title:''}}</span>
                    </el-col>
                </el-col>
                <el-col :span="24" class="paddingbottom">
                    <el-col :span="8"><span>发件账户：{{orderDetailData.pick_name}}</span></el-col>
                    <el-col :span="8"><span>下单时间：{{orderDetailData.created_at}}</span></el-col>
                    <el-col :span="8" style="text-align: right"><span>重量：{{orderDetailData.total_weight}}kg</span></el-col>
                </el-col>
            </el-row>
        </div>
        <div class="borderbottom">
            <el-col :span="24" style="padding-bottom: 8px">
                <el-col :span="15">
                    <h3 class="order-details_h3 " style="padding-top: 8px">配送信息</h3>

                    <el-col :span="24" class="order-details_content paddingbottom">
                        <el-col :span="24" class="paddingbottom">
                            <img src="./imgs/jijian@3x.png" alt="" class="img-icon"><span>发件人：{{orderDetailData.user?orderDetailData.user.name:''}}</span>
                            <span class="order-address-tel" style="padding-left: 29px">电话：{{orderDetailData.user?orderDetailData.user.phone:''}}</span>
                            <span class="changeedit" @click="$router.push({path: '/dialog/edit/express.order/' + orderDetailData.id});">
                                <img src="./imgs/Rectangle-path@3x.png" alt="" class="img-icon-edit"><span class="colorchange">修改</span>
                            </span>
                        </el-col>
                        <el-col :span="24" class="">
                            <span style="padding-left: 29px">地址：{{orderDetailData.pick_address}}</span>
                        </el-col>
                    </el-col>
                    <el-col :span="24" class="order-details_content paddingbottom">
                        <span style="padding-left: 29px">期望送达时间：{{orderDetailData.forecast_pickup_time}}</span>
                    </el-col>
                    <el-col :span="24" class="order-details_content paddingbottom">
                        <el-col :span="24" class="paddingbottom">
                            <img src="./imgs/shoujian@3x.png" alt="" class="img-icon"><span>收件人：{{orderDetailData.delivery_name}}</span>
                            <span class="order-address-tel" style="padding-left: 29px">电话：{{orderDetailData.delivery_phone}}</span>
                            <span class="changeedit" @click="$router.push({path: '/dialog/edit/express.order/' + orderDetailData.id});">
                                <img src="./imgs/Rectangle-path@3x.png" alt="" class="img-icon-edit"><span  class="colorchange">修改</span>
                            </span>
                        </el-col>
                        <el-col :span="24" class="">
                            <span style="padding-left: 29px">地址：{{orderDetailData.delivery_address}}</span>
                        </el-col>
                    </el-col>
                    <el-col :span="24" class="order-details_content paddingbottom">
                        <span style="padding-left: 29px">期望送达时间：{{orderDetailData.forecast_complete_time}}</span>
                    </el-col>
                </el-col>
                <el-col :span="9">
                    <div class="order-mapbox">
                        <express-address-map
                                :markers="[
                                        {
                                            position:[orderDetailData.pick_lon,orderDetailData.pick_lat],
                                            name: orderDetailData.pick_address,
                                            type: 'send'  //发
                                        },
                                        {
                                            position:[orderDetailData.delivery_lon,orderDetailData.delivery_lat],
                                            name: orderDetailData.delivery_address,
                                            type: 'collect'    //收
                                        }
                                       ]"
                                class="order-map">
                        </express-address-map>
                    </div>
                </el-col>
            </el-col>
            <!--<el-col :span="24" class="order-details_content  paddingbottom">-->
                <!--<el-col :span="24" class="paddingbottom">-->
                    <!--<span>修改后送达时间：2018-09-18 13:00:00 - 2018-09-18 14:00:00</span>-->
                <!--</el-col>-->
                <!--<el-col :span="24" class="paddingbottom">-->
                    <!--<span>修改后送达地址：北京 海淀区 海淀中街6号新东方大厦北楼五层</span>-->
                <!--</el-col>-->
            <!--</el-col>-->
        </div>
        <div class="borderbottom">
            <h3 class="order-details_h3">附加服务</h3>
            <el-row class="order-details_content">
                <el-col :span="24">
                    <el-col :span="24" class="paddingbottom"><span>是否保价：否</span></el-col>
                    <!--<el-col :span="24" class="paddingbottom"><span>是否代收款：否</span></el-col>-->
                </el-col>
            </el-row>
        </div>
        <div class="borderbottom">
            <h3 class="order-details_h3">备注信息</h3>
            <el-row class="order-details_content">
                <el-col :span="24">
                    <el-col :span="24" class="paddingbottom">
                        <!--<el-col :span="8" style="padding: 6px 0" v-for="index in 4">{{index}}. lower 2018-12-06 18:30:00</el-col>-->
                    </el-col>
                </el-col>
            </el-row>
        </div>
        <div class="borderbottom">
            <el-row class="order-details_content">
                <el-col :span="16" >
                    <h3 class="order-details_h3">路由状态</h3>
                    <div class="step" v-if="orderDetailData.routers">
                        <el-steps direction="vertical"  space="50px">
                            <el-step
                                    :title="item.comment + ' ' + item.name + ' ' + item.phone"
                                    :description="item.created_at"
                                    icon="el-icon-circle-check-outline"
                                    status="process"
                                    v-for="(item,index) in orderDetailData.routers"
                                    :key="index"
                            ></el-step>
                        </el-steps>
                    </div>

                </el-col>
                <el-col :span="5" style="padding:0px 4px 0 10px">
                    <!--<h3 class="order-details_h3">签收记录：</h3>-->
                    <!--<img src="./imgs/rectangle.png" alt="" style='width: 100%;'>-->
                </el-col>
            </el-row>

        </div>
        <!--<div class="borderbottom">-->
            <!--<h3 class="order-details_h3">异常备注</h3>-->
            <!--<el-row class="order-details_content" style="padding-bottom: 4px">-->
                <!--<el-col :span="24">-->

                    <!--<el-col :span="18">-->
                        <!--<el-col :span="24" style="padding-bottom: 4px">-->
                            <!--<el-col :span="12"><span>是否异常：是</span></el-col>-->
                            <!--<el-col :span="12"><span>异常类型：某某</span></el-col>-->
                        <!--</el-col>-->
                        <!--<el-col :span="24"  style="padding-bottom: 4px">-->
                            <!--<el-col :span="12"><span>异常提交环节：派送中</span></el-col>-->
                            <!--<el-col :span="12"><span>异常备注：某某</span></el-col>-->
                        <!--</el-col>-->
                        <!--<el-col :span="24"  style="padding-bottom: 4px">处理备注：</el-col>-->
                        <!--<el-col :span="24">从 2015 年 4 月</el-col>-->
                    <!--</el-col>-->
                    <!--<el-col :span="5">-->
                        <!--&lt;!&ndash;<img src="./imgs/rectangle.png" alt="" style='width: 100%;'>&ndash;&gt;-->
                    <!--</el-col>-->
                <!--</el-col>-->
            <!--</el-row>-->
        <!--</div>-->
        <div class="borderbottom" style="border: none;">
            <h3 class="order-details_h3">支付信息</h3>
            <el-row class="order-details_content">
                <el-col :span="24">
                    <el-col :span="8" class="paddingbottom"><span>交易号：</span></el-col>
                    <el-col :span="8" class="paddingbottom"><span>支付状态：{{orderDetailData.pay_status?'已支付':'未支付'}}</span></el-col>
                    <el-col :span="8" class="paddingbottom"><span>结算方式：{{orderDetailData.pay_type_link}}</span></el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="8" class="paddingbottom"><span>付款时间：{{orderDetailData.pay_time}}</span></el-col>
                    <el-col :span="8" class="paddingbottom"><span>支付金额：{{orderDetailData.price}}元</span></el-col>
                    <el-col :span="8" class="paddingbottom"><span>优惠方式：{{orderDetailData.coupon_id?'优惠券':'无优惠'}}</span></el-col>
                </el-col>
            </el-row>
        </div>
    </div>

</template>
<script>
    import ExpressAddressMap from '../map/expressAddressMap/expressAddress.vue'

    export default {
        components: {
            ExpressAddressMap
        },
        props: {
            orderDetail: {
                type: Object | Array,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {}
        },
        computed: {
            orderDetailData: function () {
                return this.orderDetail;
            }
        },
        methods: {}
    }
</script>
<style lang="less">
    .order-details_box {
        display: flex;
        flex-direction: column;
        .el-step__description{
            font-size: 14px !important;
        }
        .el-step__head.is-process{
            color: #009688 !important;
        }
        .el-step__line{
            background-color: #009688 !important;
        }
        .el-step__title{
            font-size: 14px !important;
        }
        .el-steps--vertical{
            height: auto !important;
        }
        .img-icon {
            width: 24px;
            vertical-align: -5px;
            padding-right: 5px;
        }
        .img-icon-edit{
            width: 20px;
            vertical-align: -4px;
            padding-left: 10px;
        }
        .changeedit{
            cursor: pointer;
        }
        .colorchange{
            color: #009688;
            padding-left: 4px;
        }
        .borderbottom {
            padding: 0 41px;
            border-bottom: 3px dashed #EEEEEE;
        }
        .paddingbottom {
            padding-bottom: 10px;
        }
        .order-details_title {
            margin: 0 auto;
        }
        .order-details_h3 {
            font-size: 16px;
            color: #000;
            margin: 7px 0 11px 0px;
        }
        .order-details_content {
            overflow: hidden;
            font-size: 14px;
            .step{
                /*padding: 10px 0;*/
                min-height: 100px;
                max-height: 280px;
                overflow: hidden;
                overflow-y: scroll;
            }
            .step::-webkit-scrollbar{
                width: 0px;
            }
        }

    }
</style>

